<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cube</title>
    <style>
        html {
            height: 100%;
        }

        body {
            background: linear-gradient(#29f9f0 0%, #000 80%);
            height: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wrap {
            width: 200px;
            perspective: 1000px;
        }

        .wrap .cube {
            width: 200px;
            height: 200px;
            line-height: 200px;
            font-size: 36px;
            text-align: center;
            position: relative;
            color: #ff92ff;
            transform-style: preserve-3d;
            /* transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); */
            /* animation: move 8s infinite linear; */
            transform: rotateY(-26deg) rotateX(-3deg);
            animation: mymove 8s infinite linear;
        }

        /* 动画 */
        @keyframes mymove{
            0%{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100%{
                transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        /* 大的cube */
        .wrap .cube div {
            width: 100%;
            height: 100%;
            border: 10px solid #66daff;
            border-radius: 20px;
            position: absolute;
            background-color: rgba(51, 51, 51, .3);
            transition: transform 0.3s ease-in;
            
        }

        /* 大盒子hover样式 */
        .wrap:hover .cube div.cube-top {
            transform: translateY(-200px) rotateX(90deg);
        }
        .wrap:hover .cube div.cube-bottom {
            transform: translateY(200px) rotateX(90deg);
        }
        .wrap:hover .cube div.cube-left {
            transform: translateX(-200px) rotateY(90deg);
        }
        .wrap:hover .cube div.cube-right {
            transform: translateX(200px) rotateY(90deg);
        }
        .wrap:hover .cube div.cube-front {
            transform: translateZ(200px);
        }
        .wrap:hover .cube div.cube-back {
            transform: translateZ(-200px);
        }

        /* 大cube */
        .cube div.cube-front {
            transform: translateZ(100px);
        }

        .cube div.cube-back {
            transform: translateZ(-100px);
        }

        .cube div.cube-left {
            transform: rotateY(90deg) translateZ(-100px);
        }

        .cube div.cube-right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube div.cube-top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube div.cube-bottom {
            transform: rotateX(90deg) translateZ(-100px);
        }

        /* 小cube */
        .cube span {
            display: block;
            width: 90px;
            height: 90px;
            /* background-color: #ffe7f9; */
            /* opacity: 0.5; */
            position: absolute;
            top: 50px;
            left: 50px;
            border: 5px solid #66daff;
            background-size: cover;
            /* backface-visibility: hidden; */
            /* border-radius: 30%; */
        }

        .cube span.xs-front {
            transform: translateZ(50px);
        }

        .cube span.xs-back {
            background-image: url(./image/cl.jpg);
            transform: translateZ(-50px);
        }

        .cube span.xs-left {
            background-image: url(./image/c2.jpg);
            transform: translateX(-50px) rotateY(-90deg);
        }

        .cube span.xs-right {
            background-image: url(./image/c3.jpg);
            transform: translateX(50px) rotateY(90deg);
        }

        .cube span.xs-top {
            background-image: url(./image/c4.jpg);
            transform: translateY(-50px) rotateX(90deg);
        }

        .cube span.xs-bottom {
            background-image: url(./image/c5.jpg);
            transform: translateY(50px) rotateX(90deg);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="cube">
            <div class="cube-front">前</div>
            <div class="cube-back">后</div>
            <div class="cube-left">左</div>
            <div class="cube-right">右</div>
            <div class="cube-top">上</div>
            <div class="cube-bottom">下</div>
            <span class="xs-front"></span>
            <span class="xs-back"></span>
            <span class="xs-left"></span>
            <span class="xs-right"></span>
            <span class="xs-top"></span>
            <span class="xs-bottom"></span>
        </div>
    </div>
</body>

</html>